::-webkit-scrollbar  
{  
    width: 5px;  /*滚动条宽度*/
    /* border-radius: 50px; */
    /* background-color: #555; */
    /* border: 1px solid rgba(0, 0, 0, .5); */
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);   */
    /* border-radius: 10px;  滚动条的背景区域的圆角 */
    background-color: transparent;/*滚动条的背景颜色*/  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
  width: 3px;  /*滚动条宽度*/
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.349);
  border: 1px solid rgba(0, 0, 0, .5);
  /* border-radius: 10px;  滚动条的圆角 */
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);   */
  /* background-color: green;  滚动条的背景颜色 */
} 
/*富文本编辑器
*/
 .editor {
	min-height: 150px !important;
	height: calc(100% - 50px) !important;
	background-color: white;
	border-collapse: separate; 
	border: 1px solid rgb(204, 204, 204); 
	padding: 4px; 
	box-sizing: content-box; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; 
	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	border-top-right-radius: 3px; border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px; border-top-left-radius: 3px;
  overflow-x:hidden;
  overflow-y: auto;
  resize: vertical;
	outline: none;
}
.voiceBtn {
  width: 20px;
  color: transparent;
  background-color: transparent;
  transform: scale(2.0, 2.0);
  -webkit-transform: scale(2.0, 2.0);
  -moz-transform: scale(2.0, 2.0);
  border: transparent;
  cursor: pointer;
  box-shadow: none;
  -webkit-box-shadow: none;
}

div[data-role="editor-toolbar"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.dropdown-menu a {
  cursor: pointer;
}
/* chat msg------------------------------------------------------ */
.message {
  line-height: 22px;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin: .2rem;
  margin-top: 16px;
  position: relative;
  left: 2%;
}

.message>.user-head {
  width: 1rem;
  height: 1rem;
  border: .05rem solid rgba(255, 255, 255, .5);
  position: relative;
  border-radius: 50%;
  flex-shrink: 0;
  background: url() center no-repeat;
  background-size: cover;
  box-shadow:  0 0 0.2rem rgba(0, 0, 0, .5);
}

.message>.user-head>span {
  position: absolute;
  color: #fff;
  line-height: 1rem;
  top: 0;
  left: 0;
  font-size: .8rem;
  width: 100%;
  text-align: center;
}

.message .msg-box sup {
  width: calc(100% - .6rem);
  display: block;
  color: #555;
  margin: 0 15px;
}
.message .msg-head{
  width:40px;
  height: 40px;
  position:relative;
  border-radius: 5000px;
  background: url('/header/default/header.jpg') center no-repeat;
  background-size: cover;
  
  box-shadow: 0 0 1px rgba(0, 0, 0, .5);
}
.message .msg-box .msg {
  /* margin: 0 .3rem; */
  background-color: rgb(0, 204, 34);
  color: #fff;
  max-width: 90%;
  padding: .3rem;
  border-radius: 10px;
  border-top-left-radius: 0;
  position: relative;
  word-break: break-all;
}
.message .msg-box .msg img{
  display: block;
  margin: 5px auto;
  width: 90%;
  height: auto;
}
.message-me .msg-box sup {
  text-align: right;
}

.message-me .msg-box .msg {
  background-color: rgb(0, 183, 255);
  border-top-left-radius:  10px;
  border-top-right-radius: 0;
}

.message-me {
  justify-content: flex-end;
  left: -2%;  
}

.message .user {
  padding-right: 5px;
  padding-left: 5px;
}

.sysMsg {
  color: #c1bfbf;
  padding-right: 5px;
  padding-left: 5px;
  font-size: 12px;
  text-align: center;
}
/* Index.html---------------------------------------------------- */

#nav-top{
  margin-bottom: 0 !important;
}
.navbar i.glyphicon{
  font-size: 16px;
}
#main-container{
  position: relative;
}
#bg{
  width: 100vw;
  height: 100vh;
  background: url() center no-repeat;
  background-size: cover;
  background-color: rgb(218, 218, 218);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10000000000000000000;
}
.chat-box{
  position: relative;
  padding: 5px;
}
.chat-box>.chat-box-body{
  background-color: rgba(255, 255, 255, 0.75);
  /* margin-top: -10px; */
  width: 100%;
  height: 100%;
  position: relative;
}
.chat-box>.chat-box-body>.chat-box-title{
  width: 100%;
  height: 50px;
  margin: 0;padding: 0;
  line-height: 50px;
  font-size: 24px;
  background-color: rgb(255, 110, 110);
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;left: 0;
  overflow: hidden;text-overflow: ellipsis;
}
.chat-box>.chat-box-body>.chat-box-screen{
  width: 100%;
  height: calc(100% - 310px);
  position: relative;
  top: 50px;
  overflow-x: hidden;
  overflow-y: auto;
}
.chat-box>.chat-box-body>.chat-box-input{
  width: 100%;
  height: 210px;
  position: absolute;
  bottom: 50px;left: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.0745098);
}
.chat-box>.chat-box-body>.chat-box-submit{
  display: block;
  width: 100%;
  height: 50px;
  height: 50px;
  position: absolute;
  background-color: rgb(216, 216, 216);
  bottom: 0;left: 0;
}
.navbar-default .navbar-nav>li:hover>a, .navbar-default .navbar-nav>li:hover>a:focus, .navbar-default .navbar-nav>li:hover>a:hover {
  color: #555;
  background-color: #e7e7e7;
}

.p0{
  padding: 0 !important;
}
.tac{
  text-align: center;
}
.tar{
  text-align: right;
}
.row-box{
  background-color: rgba(255, 255, 255, 0.75);
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.0745098);
}
.row-box .row-count>p{
  margin: 0;
}
.row-box .row-header{
  padding-bottom: 5px;
}
.row-box .row-title{
  height: 50px;
  padding: 0;
  padding-left: 15px;
  line-height: 50px;
  font-size: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-box .row-count strong{
  height: 30px;
  line-height: 30px;
  font-size: 16px;

}
.row-box .row-count sub{
  height: 20px;
  line-height: 20px;
  font-size: 12px;
}
.row-box .row-footer{
  height: 0;
  font-size: 0;
  display: none;
  transition: all .5s;
}
.row-box .row-body{
  overflow-y: auto;
  overflow-x: hidden;
}
.row-box.active{
  border: 1px solid rgba(0, 0, 0, 0.123);
  position: relative;
  background-color: #fdfdfd;
}

.row-box.active>.row-footer{
  margin: 0;
}
.row-box.active>.row-footer{
  height: auto;
  display: block;
  font-size: 12px;
}
.row-box.active>.row-footer .glyphicon{
  transform: rotate(180deg);
}
.row-box .row-body{
  display: none;
} 
.row-box.active>.row-body{
  display: block;
  margin: 0;
} 
.row-box.active>.row-header{
  color: #fff;
  margin: 0;
  background-color: rgb(27, 194, 216);
  box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
}
.row-box.active[role=note]>.row-header{
  background-color: rgb(27, 216, 144);
  
}
@keyframes rotate360
{
  from {transform:rotate(0deg)}
  to {transform: rotate(359deg)}
}
.refresh{
  margin: 10px 0;
}
.refresh .glyphicon-refresh{
  animation: rotate360 .5s linear infinite;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 28px;
  text-align: center;
  color: rgba(0, 0, 0, .33);
}
#row-box-container{
  overflow-x:hidden;
  overflow-y:auto;
  background-color: #fff;
}
.border-bottom-xs::after{
  content: '';
  display: block;
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.363)
}
.row-box .add-btn{
  display: none;
}
.row-box.active .add-btn{
  position: absolute;
  display: block;
  bottom: 20px;
  right: 40px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
  padding: 0;
  border-radius: 9999999999999999px;
  overflow: hidden;
}
.row-box.active[role=note] {
  width: 100%;
  height: 100%;
  max-height: 600px;
  z-index: 10;
  top: 0;
  left: 0;
}
[role=topic] .row-box.active[role=note]{
  position: absolute;  
}
.row-box.active[role=note] .add-btn{
  background-color: rgb(34, 237, 159);
  border-color: rgb(23, 163, 109);
  right: 30px;
}
.row-box.active[role=topic] .add-btn[role=likeTip]{
  background-color: rgb(34, 237, 159);
  border-color: rgb(23, 163, 109);
  bottom: 80px;
}
.row-box.active[role=topic] .add-btn[role=unLikeTip]{
  background-color: rgb(237, 217, 34);
  border-color: rgb(163, 142, 23);
  bottom: 80px;
}
table tbody {  
  display:block;  
  height:350px;  
  overflow-y:scroll;
}    
table thead, tbody tr {  
  display:table;  
  width:100%;
  table-layout:fixed;  
}  

table thead {  
  width: calc( 100% - 1em )  
} 
